import React, { useCallback, useMemo, useRef } from 'react'
import cn from 'classnames'

import { isNumber } from 'helpers/is'
import styles from './style.module.scss'

interface IProps {
  className?:string
  donePercent?:number
  originDonePercent?:number
  renderLabel?:()=>string
  onBarClick:(donePercent :number) => void
}

const ProgressBar : React.FC<IProps> = ({className,originDonePercent,donePercent=0,renderLabel,onBarClick})=>{
  //https://www.cnblogs.com/lanpang9661/p/12604712.html ref
  const barRef = useRef<HTMLDivElement | null>()
  const dotRef = useRef<HTMLDivElement | null>()

  const getPercent = useCallback((event:React.MouseEvent<HTMLDivElement>)=>{
    const box = barRef.current?.getBoundingClientRect()
    const clickX  = event.pageX - (box?.x || 0)

    const percent = barRef.current ? clickX / barRef.current.offsetWidth : 0

    return percent
  },[])

  const handleBarClick = useCallback(
    (event:React.MouseEvent<HTMLDivElement>)=>{
      const percent = getPercent(event)
      onBarClick(percent)
    },
    [getPercent,onBarClick]
  )

  const width = useMemo(()=>{
    return `${isNumber(originDonePercent)? originDonePercent : donePercent * 100}%`
  },[donePercent,originDonePercent])

  return (
    <div className = {cn(styles.roots ,className)} onClick={handleBarClick} ref={(ref)=>( barRef.current = ref )}>
      <div className={styles.doneWrap} style={{width}} >
        <div className={styles.done}>
        <div className={styles.controllDot} draggable={false} ref={(ref=>{(dotRef.current = ref)})}>
          <div className={styles.label}>{renderLabel ? renderLabel() : width}</div>
        </div>
        </div>
      </div>
    </div>
  )
}

export default ProgressBar